var path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');  // 用于移除 JavaScript 上下文中的未引用代码(dead-code)
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = function () {
    let set = {
        entry: {
            // 每个入口都是一个页面
            login: './src/jsx/login.jsx',  // 登录页
            index: './src/jsx/index.jsx',  // 首页
            vendor: ['react', 'react-dom', 'jquery']
        },
        output: {
            path: path.resolve(__dirname, 'dist'),//输出的文件路径
            // filename: 'js/[name]-[chunkhash].js'//输出的js文件名
            filename: 'js/[name].js'//输出的js文件名
        },
        devtool: 'inline-source-map',
        devServer: {  // 用于开发模式快速打包及启动 web 服务
            contentBase: path.join(__dirname, "dist"),  // 定义ti
            compress: true,  // 支持 gzip 压缩
            index: 'index.html',
            port: '8080'
        },
        resolve: {
            extensions: ['.jsx', '.js', '.es6', 'json']
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        use: 'css-loader'
                    })
                },
                {
                    // bootstrap
                    test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                    loader: "file-loader"
                },
                {
                    test: /\.jsx$/,
                    use: 'babel-loader',
                    include: path.resolve(__dirname, 'src/jsx')
                },
                {
                    test: require.resolve('zepto'),
                    loader: 'exports-loader?window.Zepto!script-loader'
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin({
                // 放到独立的 css 文件中
                filename: '[name].css'
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }),
            new UglifyJSPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor'
            }),
            new CleanWebpackPlugin(['dist'], { watch: true })
        ]
    }

    Object.keys(set.entry).forEach(v => {
        if (v !== 'vendor') {
            set.plugins.push(
                new HtmlWebpackPlugin({
                    filename: v + '.html', // 输出的html路径
                    template: 'template.html', // html模板路径
                    //inject : 'head',  // js 文件在 head 中，若为 body 或者 true 则在 body 中
                    inject: true,
                    title: v, // 设置为页面标题，也可以在页面使用 document.title 设置
                    chunks: ['vendor', v] // 要加入公共文件的引用，否则会报错
                })
            )
        }
    })


    return set;
}